/*
 * @Author: your name
 * @Date: 2021-09-04 16:09:31
 * @LastEditTime: 2021-09-05 14:46:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\mock\echartdatas.ts
 */
import echarts from '../ntils/echart'
// 雷达图

export const SeleData = {
    animation: true,
    legend: {
        bottom: 0,
        data: ['Visits', 'Sales'],
    },
    tooltip: {},
    radar: {
        radius: '60%',
        splitNumber: 8,
        indicator: [
            {
                text: '2017',
                max: 100,
            },
            {
                text: '2017',
                max: 100,
            },
            {
                text: '2018',
                max: 100,
            },
            {
                text: '2019',
                max: 100,
            },
            {
                text: '2020',
                max: 100,
            },
            {
                text: '2021',
                max: 100,
            },
        ],
    },
    series: [
        {
            type: 'radar',
            symbolSize: 0,
            areaStyle: {
                shadowBlur: 0,
                shadowColor: 'rgba(0,0,0,.2)',
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1,
            },
            data: [
                {
                    value: [90, 100, 86, 100, 100, 20],
                    name: 'Visits',
                    itemStyle: {
                        color: '#9f8ed7',
                    },
                },
                {
                    value: [70, 75, 70, 76, 20, 85],
                    name: 'Sales',
                    itemStyle: {
                        color: '#1edec5',
                    },
                },
            ],
        },
    ],
} 
// 
export const VisitAnalysis = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                width: 1,
                color: '#019680',
            },
        },
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
            '6:00',
            '7:00',
            '8:00',
            '9:00',
            '10:00',
            '11:00',
            '12:00',
            '13:00',
            '14:00',
            '15:00',
            '16:00',
            '17:00',
            '18:00',
            '19:00',
            '20:00',
            '21:00',
            '22:00',
            '23:00',
        ],
        splitLine: {
            show: true,
            lineStyle: {
                width: 1,
                type: 'solid',
                color: 'rgba(226,226,226,0.5)',
            },
        },
        axisTick: {
            show: false,
        },
    },
    yAxis: [
        {
            type: 'value',
            max: 80000,
            splitNumber: 4,
            axisTick: {
                show: false,
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
                },
            },
        },
    ],
    grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
    series: [
        {
            smooth: true,
            data: [
                111,
                222,
                4000,
                18000,
                33333,
                55555,
                66666,
                33333,
                14000,
                36000,
                66666,
                44444,
                22222,
                11111,
                4000,
                2000,
                500,
                333,
                222,
                111,
            ],
            type: 'line',
            areaStyle: {},
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(28,222,197,0.3)',
                },
                {
                    offset: 1,
                    color: 'rgba(28,222,197,0)',
                },
                ], false),
            },
        },
        {
            smooth: true,
            data: [
                33,
                66,
                88,
                333,
                3333,
                5000,
                18000,
                3000,
                1200,
                13000,
                22000,
                11000,
                2221,
                1201,
                390,
                198,
                60,
                30,
                22,
                11,
            ],
            type: 'line',
            areaStyle: {},
            itemStyle: {
            
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#14c8d4' },
                    { offset: 1, color: '#43eec6' },
                ]),
            },
        },
    ],
}

export const VisitAnalysisBar = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                width: 1,
                color: '#019680',
            },
        },
    },
    grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
    xAxis: {
        type: 'category',
        data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
        ],
    },
    yAxis: {
        type: 'value',
        max: 8000,
        splitNumber: 4,
    },
    series: [
        {
            data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
            type: 'bar',
            barMaxWidth: 80,
            itemStyle: {
                normal: {
                // 柱状图圆角边框
                    barBorderRadius: [12, 12, 0, 0],
                    // 图表渐变色
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#14c8d4' },
                        { offset: 1, color: '#43eec6' },
                    ]),
                },
            },
        },
    ],
}

export const VisitSource = {
    tooltip: {
        trigger: 'item',
    },
    legend: {
        bottom: '1%',
        left: 'center',
    },
    series: [
        {
            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
            },
            label: {
                show: false,
                position: 'center',
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '12',
                    fontWeight: 'bold',
                },
            },
            labelLine: {
                show: false,
            },
            data: [
                { value: 1048, name: '搜索引擎' },
                { value: 735, name: '直接访问' },
                { value: 580, name: '邮件营销' },
                { value: 484, name: '联盟广告' },
            ],
            animationType: 'scale',
            animationEasing: 'exponentialInOut',
            animationDelay() {
                return Math.random() * 100
            },
        },
    ],
}

export const homeSource = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 255, 233,0)',
                    }, {
                        offset: 0.5,
                        color: 'rgba(255, 255, 255,1)',
                    }, {
                        offset: 1,
                        color: 'rgba(0, 255, 233,0)',
                    }],
                    global: false,
                },
            },
        },
    },
 
    grid: {
        top: '15%',
        left: '1%',
        right: '1%',
        bottom: '15%',
        containLabel: true,
    },
    xAxis: [{
        type: 'category',
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitArea: {
            color: '#666',
            lineStyle: {
                color: '#666',
            },
        },
        axisLabel: {
            color: '#666',
        },
       
        boundaryGap: false,
        data: ['1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            '10',
            '11',
            '12',
            '13',
            '14',
            '15',
            '16',
            '17',
            '18',
            '19',
            '20',
            '21',
            '22',
            '23',
            '24',
            '25',
            '26',
            '27',
            '28',
            '29',
            '30',
            '31',
        ],

    }],

    yAxis: [{
        type: 'value',
        splitNumber: 4,
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.1)',
            },
        },
       
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#666',

            },
        },
        
    }],
    series: [
        {
            name: '趋势',
            type: 'line',
            smooth: true, // 是否平滑
            symbol: 'none',
            
            lineStyle: {
                normal: {
                    color: '#1cdec5',
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: false,
                position: 'top',
                textStyle: {
                    color: '#00ca95',
                },
            },
            itemStyle: {
                color: '#f9527d',
                borderColor: '#fff',
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
                show: false,
            },
            tooltip: {
                show: true,
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(28,222,197,0.3)',
                    },
                    {
                        offset: 1,
                        color: 'rgba(28,222,197,0)',
                    },
                    ], false),
                    shadowColor: 'rgba(28,222,197,0.1)',
                    shadowBlur: 20,
                },
            },
            data: [632,
                760,
                980,
                911,
                922,
                857,
                712,
                660,
                999,
                731,
                768,
                964,
                888,
                596,
                423,
                776,
                992,
                574,
                629,
                922,
                857,
                672,
                757,
                658,
                885,
                760,
                679,
                813,
                645,
                988,
                802],
        },
    ],
}

export const homeline = {

    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985',
            },
        },
    },
    legend: {
        data: ['邮件营销'],
        x: 'left',
    },
    color: ['#0080ff'],

    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '3%',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五'],
        },
    ],
    yAxis: [
        {
            type: 'value',
        },
    ],
    series: [
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            itemStyle: {  
                normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#81befd', // 0% 处的颜色
                    }, {
                        offset: 0.4, color: '#e4f2ff', // 100% 处的颜色
                    }, {
                        offset: 1, color: '#fff', // 100% 处的颜色
                    }]), // 背景渐变色    
                    lineStyle: { // 系列级个性化折线样式  
                        width: 3,  
                        type: 'solid',  
                        color: '#0180ff', // 折线的颜色
                    },  
                },  
                emphasis: {
                    color: '#0180ff',   
                    lineStyle: { // 系列级个性化折线样式  
                        width: 2,  
                        type: 'dotted',  
                        color: '0180ff', 
                    },  
                },  
            }, // 线条样式
            symbolSize: 5, // 折线点的大小
            areaStyle: { normal: {} },
            data: [820, 932, 901, 934, 1290],
        },
    ],
}